<template>
  <div class="math-box">
    <div class="head-box">
      <div class="head-left">
        <div class="dropdown-box1">
          <el-select
            v-model="chooseTimeType"
            :suffix-icon="CaretBottom"
            class="m-2"
          >
            <el-option
              v-for="item in chooseTimeTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="dropdown-box2">
          <el-date-picker v-model="chooseTime" type="date" :clearable="false" />
        </div>
      </div>
      <div class="head-mid">
        <img src="@/assets/imgs/bigTitle.png" alt="" />
      </div>
      <div class="head-right">
        <div class="time-box">{{ cureentTime }}</div>
        <div class="weather-box">32ºC 局部多云</div>
        <img src="@/assets/imgs/icon-duoyun.png" alt="" />
      </div>
    </div>
    <div class="main-box">
      <div class="main-left">
        <MainLeft ref="mainLeftRef"></MainLeft>
      </div>
      <div class="main-mid">
        <MainMid ref="mainMidRef"></MainMid>
      </div>
      <div class="main-right">
        <MainRight ref="mainRightRef"></MainRight>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount } from "vue";
import MainLeft from "./components/left.vue";
import MainMid from "./components/mid.vue";
import MainRight from "./components/right.vue";
import { CaretBottom } from "@element-plus/icons-vue";
import dayjs from "dayjs";

const cureentTime = ref("");
const timeout1 = ref();

const getCurrentTime = () => {
  timeout1.value = setTimeout(() => {
    cureentTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
    getCurrentTime();
  }, 1000);
};
getCurrentTime();

const chooseTimeType = ref("year");
const chooseTimeTypeList = ref([
  {
    value: "day",
    label: "按日查询",
  },
  {
    value: "month",
    label: "按月查询",
  },
  {
    value: "year",
    label: "按年查询",
  },
]);
const chooseTime = ref("2025-04-09");

const mainLeftRef = ref();
const mainMidRef = ref();
const mainRightRef = ref();

// const isFirstResize= ref(false)
// window.addEventListener("resize", function () {
//   if(!isFirstResize.value){
//     console.log('首次渲染')
//     isFirstResize.value = true
//   }else{
//     isFirstResize.value = false
//   }
// });

const lastWidth = ref(0);
const lastHeight = ref(0);

window.addEventListener("resize", () => {
  if (lastWidth.value !== window.innerWidth) {
    console.log('渲染',window.innerWidth)
    lastWidth.value = window.innerWidth;
    lastHeight.value = window.innerHeight;
    // mainLeftRef.value.resizeRender()
    mainMidRef.value.resizeRender()
    mainRightRef.value.resizeRender()
  }
});
onBeforeUnmount(() => {
  clearTimeout(timeout1.value);
});
</script>

<style scoped lang="scss">
.math-box {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/imgs/bigBack.png);
  background-size: 100% 100%;
  // background-size: cover;
  background-repeat: no-repeat;
  overflow-y: scroll;
}
.head-box {
  display: flex;
  height: 90px;
  background-image: url(../../assets/imgs/headBack.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .head-left {
    flex: 1;
    display: flex;
    padding-top: 54px;
    padding-left: 60px;
    box-sizing: border-box;
    .dropdown-box1 {
    }
    .dropdown-box2 {
      margin-left: 2px;
    }
  }
  .head-mid {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 40px;
    margin-top: 36px;
    box-sizing: border-box;
    img {
      width: 157.61px;
      height: 30px;
    }
  }
  .head-right {
    flex: 1;
    display: flex;
    align-items: center;
    padding-top: 40px;
    box-sizing: border-box;

    .time-box {
      font-weight: bold;
      font-size: 18px;
      color: #76eaff;
    }
    .weather-box {
      margin: 0 8px 0 20px;
      font-weight: 600;
      font-size: 14px;
      color: #76eaff;
    }
    img {
      width: 20px;
      height: 14px;
    }
  }
}
.main-box {
  display: flex;
  padding: 0 40px 0 50px;
  box-sizing: border-box;
  .main-left {
    flex: 1;
  }
  .main-mid {
    width: 977px;
    // flex: 2;
    margin: 0 12px 0 20px;
  }
  .main-right {
    flex: 1;
  }
}

.dropdown-box1 {
  ::v-deep(.el-select) {
    width: 136px;
  }
  ::v-deep(.el-select__wrapper) {
    background: rgba(60, 95, 164, 1);
    box-shadow: 0 0 0 0;
  }
  ::v-deep(.el-select__placeholder) {
    color: rgba(167, 243, 252, 0.7);
  }
  ::v-deep(.el-select__caret) {
    color: #00b4c4;
  }
}
.dropdown-box2 {
  ::v-deep(.el-input) {
    width: 160px;
  }
  ::v-deep(.el-input__wrapper) {
    background: rgba(60, 95, 164, 1);
    box-shadow: 0 0 0 0;
  }
  ::v-deep(.el-input__inner) {
    color: rgba(167, 243, 252, 0.7);
  }
  ::v-deep(.el-input__prefix) {
    display: none;
  }
}
</style>
